<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<style type="text/css">
	body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#l-map{height:300px;width:100%;}
	#r-result{width:100%; font-size:14px;line-height:20px;}
	</style>
	<title>地图展示</title>

<head th:include="include :: header"></head>
<body>
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="signupForm">
						<input id="userId" name="userId"
							type="hidden">
						<div class="form-group">
							<label class="col-sm-2 control-label">名称：</label>
							<div class="col-sm-10">
								<input id="name" name="name" th:value="${user.companyName}" class="form-control" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">位置：</label>
							<div class="col-sm-10">
								<input id="keyword" name="location" class="form-control" type="text" th:value="${user.province}+${user.city}+${user.district}+${user.liveAddress}">
							</div>
						</div>					
						<div class="form-group">
							<label class="col-sm-2 control-label">实时定位：</label>
							<div class="col-sm-10">
							</div>
						</div>
						
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="l-map"></div>
	<div id="r-result">
		<div id="result"></div>
	</div>
	
<div th:include="include::footer"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xezw8yn6fxi22tfKYyRBjT09wYOqiYir"></script>
<script type="text/javascript" src="/js/appjs/sys/user/GpsMap.js"></script>
<script th:inline="javascript">

	var listUser=[[${listUser}]];
	var user = [[${user}]];
	console.log(user);
	var adds = [];
	var phones = [];
	var deptNames = [];
	var index = 0;
	// 百度地图API功能
	var map = new BMap.Map("l-map");
	//地址转换为经纬度
	var myGeo1 = new BMap.Geocoder();
	var index = 0;
	var myGeo = new BMap.Geocoder();
	for(var i=0;i<listUser.length;i++){
	console.log(listUser[i].city+listUser[i].district+listUser[i].liveAddress);
		adds.push(listUser[i].province+listUser[i].city+listUser[i].district+listUser[i].liveAddress+'<br/>电话：'+listUser[i].phone+'<br/>公司名称:'+listUser[i].companyName);
		phones.push(listUser[i].mobile);
		console.log(user.city+user.district+user.liveAddress);
		if(user.city+user.district+user.liveAddress==0){
			//地址为空
			map.centerAndZoom(new BMap.Point(113.25199,23.399452), 13);
		}else{
			//地址不为空
			map.centerAndZoom(user.city+user.district+user.liveAddress, 13);
		}
			
			map.enableScrollWheelZoom(true);
			var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
			var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
			map.addControl(top_left_control);
			map.addControl(top_left_navigation);
			function bdGEO(){
				var add = adds[index];
				var deptName = deptNames[index];
				geocodeSearch(add);
				index++;
			}
			function geocodeSearch(add){
				if(index < adds.length){
					setTimeout(window.bdGEO,400);
				} 
				myGeo.getPoint(add, function(point){
					if (point) {
						var address = new BMap.Point(point.lng, point.lat);
						addMarker(address,add);
					}
				}, "南宁市");
			}
			// 编写自定义函数,创建标注
			function addMarker(point,add){
				var marker = new BMap.Marker(point);
				map.addOverlay(marker);
				var opts = {
						  width : 200,     // 信息窗口宽度
						  height: 100,     // 信息窗口高度
						  title : "", // 信息窗口标题
						  enableMessage:true,//设置允许信息窗发送短息
						}
						var infoWindow = new BMap.InfoWindow('<div style="margin:0;line-height:20px;padding:2px;">' +
			                    '地址：'+add +
			                  '</div>', opts);  // 创建信息窗口对象 
						marker.addEventListener("click", function(){          
							map.openInfoWindow(infoWindow,point); //开启信息窗口
						});
				
			}
			
			bdGEO();

	}

/* 
	bdGEO(); */
</script>
</html>
